<template>
  <div class="qc-table-toolbar">
    <div class="qc-table-toolbar-container">
      <div class="qc-table-toolbar-left" v-hideMobile>
        <div class="qc-table-toolbar-title">
          <slot name="toolbarTitle">{{ toolbarTitle }}</slot>
        </div>
      </div>
      <div class="qc-table-toolbar-right">
        <a-space>
          <slot name="toolbarButton"></slot>
          <div class="qc-table-toolbar-setting-items">
            <a-space>
              <div class="qc-table-toolbar-setting-item">
                <a-tooltip placement="top" :title="t('component.table.toolbar.reload')">
                  <ReloadOutlined @click="onReloadButtonClick" />
                </a-tooltip>
              </div>
              <div class="qc-table-toolbar-setting-item" v-if="showToolbar.indexOf('downloadExcel') != -1">
                <a-tooltip placement="top" :title="t('component.table.toolbar.downloadExcel')">
                  <DownloadOutlined @click="onDownloadButtonClick" />
                </a-tooltip>
              </div>
              <div class="qc-table-toolbar-setting-item">
                <a-dropdown :trigger="['click']">
                  <a-tooltip placement="top" :title="t('component.table.toolbar.density')">
                    <ColumnHeightOutlined />
                  </a-tooltip>
                  <template #overlay>
                    <a-menu v-model:selectedKeys="state.menuSelectKeys" style="width: 75px">
                      <a-menu-item key="default" @click="onSizeChange('default')">
                        {{ t('component.table.size.default') }}
                      </a-menu-item>
                      <a-menu-item key="middle" @click="onSizeChange('middle')">
                        {{ t('component.table.size.medium') }}
                      </a-menu-item>
                      <a-menu-item key="small" @click="onSizeChange('small')">
                        {{ t('component.table.size.small') }}
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </div>
              <div class="qc-table-toolbar-setting-item">
                <a-popover trigger="click" placement="bottomRight" :getPopupContainer="(trigger) => trigger.parentNode">
                  <template #title>
                    <div class="qc-table-column-setting-title">
                      <a-checkbox
                        v-model:checked="state.checkAll"
                        :indeterminate="state.indeterminate"
                        @change="onCheckAllChange"
                      >
                        {{ t('component.table.toolbar.columnDisplay') }}
                      </a-checkbox>
                      <a @click="restCheckedKeys"> {{ t('component.table.toolbar.reset') }}</a>
                    </div>
                  </template>
                  <template #content>
                    <a-checkbox-group v-model:value="state.checkedKeys" :options="columnSettingOptions" />
                  </template>
                  <a-tooltip placement="top" :title="t('component.table.toolbar.columnSetting')">
                    <SettingOutlined />
                  </a-tooltip>
                </a-popover>
              </div>
            </a-space>
          </div>
        </a-space>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, watch } from 'vue'
import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import { PageTableColumnProps } from '../interface'
import { useI18n } from 'vue-i18n'
import { useStore } from '/@/store'

export type ColumnSettingOptionType = {
  label?: any
  value: string
}

export default defineComponent({
  name: 'TableToolbar',
  emits: ['reload', 'downloadExcel', 'update:tableSize', 'update:checkedKeys'],
  props: {
    //列表
    columns: {
      type: Array,
    },
    tableSize: {
      type: String,
    },
    //默认选中的值
    checkedKeys: {
      type: Array,
    },
    toolbarTitle: {
      type: String,
    },
    showToolbar: {
      type: Array,
      default: () => ['reload', 'downloadExcel', 'density', 'columnDisplay'],
    },
  },
  components: {
    ReloadOutlined,
    ColumnHeightOutlined,
    SettingOutlined,
    DownloadOutlined,
  },
  setup(props, { emit }) {
    const { t } = useI18n()
    //设置标题
    const toolbarTitle = props.toolbarTitle || t('component.table.dataTable')
    //所有的key值
    const treeData = [...(props.columns as Array<PageTableColumnProps>)]
    const columnSettingOptions: Array<ColumnSettingOptionType> = []
    //第一次初始化则是默认的选中keys
    const defaultCheckedKeys = [...(props.checkedKeys as Array<string>)]
    treeData.forEach((item) =>
      columnSettingOptions.push({
        label: item.title,
        value: item.dataIndex,
      })
    )
    const state = reactive({
      //设置 indeterminate 状态，只负责样式控制
      indeterminate: defaultCheckedKeys?.length !== columnSettingOptions.length,
      checkAll: defaultCheckedKeys?.length === columnSettingOptions.length,
      checkedKeys: defaultCheckedKeys as Array<string>,
      menuSelectKeys: [props.tableSize],
    })

    //监听列值变化
    watch(
      () => state.checkedKeys,
      (val: Array<string>) => {
        state.indeterminate = !!val.length && val.length < columnSettingOptions.length
        state.checkAll = val.length === columnSettingOptions.length
        emit('update:checkedKeys', val)
      }
    )

    const onCheckAllChange = (e: any) => {
      if (e.target.checked) {
        const arr: Array<string> = []
        columnSettingOptions.forEach((item) => {
          arr.push(item.value)
        })
        state.checkedKeys = arr
      } else {
        state.checkedKeys = []
      }

      state.indeterminate = false
    }

    /**
     * 重置选择keys
     */
    const restCheckedKeys = () => {
      state.checkedKeys = defaultCheckedKeys
    }

    //刷新按钮点击事件
    const onReloadButtonClick = () => {
      emit('reload')
    }

    //下载按钮点击事件
    const onDownloadButtonClick = () => {
      emit('downloadExcel')
    }

    //变化事件
    const onSizeChange = (size: string) => {
      state.menuSelectKeys = [size]
      emit('update:tableSize', size)
    }
    return {
      t,
      toolbarTitle,
      showToolbar: props.showToolbar,
      columnSettingOptions,
      state,
      treeData,
      onCheckAllChange,
      restCheckedKeys,
      onReloadButtonClick,
      onDownloadButtonClick,
      onSizeChange,
    }
  },
})
</script>
<style lang='less' scoped>
.qc-table-toolbar {
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 1;
}

.ant-space-align-center {
  align-items: center;
}

.qc-table-toolbar-container {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}

.qc-table-toolbar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.qc-table-toolbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.qc-table-toolbar-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 16px;
}

.qc-table-toolbar-setting-item {
  margin: 0 4px;
  color: rgba(0, 0, 0, 0.75);
  font-size: 16px;
  cursor: pointer;
}

.qc-table-column-setting-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
}

::v-deep(.ant-popover-inner-content) {
  padding: 0 0 8px 14px !important;
}

::v-deep(.ant-checkbox-group-item) {
  display: block;
}
</style>